<template>
  <el-dialog :title="title" v-model="visible" width="80%" :before-close="closeDialog" append-to-body>
    <div class="map">
      <div class="left">
        <cesium-map />
      </div>
      <ul class="right">
        <h3>监控列表</h3>
        <template>
          <li v-if="!treeData">暂无数据</li>
          <li v-for="(item, index) in treeData" :key="index" @click="heightLightHandler(item, index)" :ref="item.id" v-else>
            <div class="content" :style="{ color: active == index ? '#0088ff' : '#000' }">
              {{ item.name }}
            </div>
          </li>
        </template>
      </ul>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { monitorAlarm, configKey } from '@/api/earlyWarning/index.js';
import useDialog from '@/hooks/useDialog';
import { useDialogStore } from '@/store/modules/useDialogStore';
import cesiumMap from '@/components/cesium/index.vue';

const { flyTo } = useDialogStore();
const { title, visible, openDialog, closeDialog } = useDialog({
  title: '监控列表'
});
const props = defineProps(['modelValue']);
const emit = defineEmits(['input']);
const distance = ref('');
const treeData = ref([]);
watch(
  () => props.modelValue,
  (value) => {
    console.log('点击监控列表', value);
    flyTo({ longitude: value.longitude, latitude: value.latitude });
    getMonitor(value);
  },
  { deep: true }
);
watch(visible, (val) => {
  if (!val) {
    emit('input', {});
  }
});
// 获取监控列表
const getMonitor = async (row) => {
  try {
    const { msg } = await configKey('alarm_distance');
    distance.value = msg;
    const { data } = await monitorAlarm({
      longitude: row.longitude,
      latitude: row.latitude,
      distance: 2000
    });
    treeData.value = data;
  } catch (error) {
    console.warn(error, '获取周边资源失败');
  }
};
//点击列表高亮
const heightLightHandler = (data, index) => {
  this.active = index;
  this.flyTo(data);
};
defineExpose({
  open: openDialog,
  close: closeDialog
});
</script>
<style lang="scss" scoped>
.map {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;

  .left {
    width: 60%;
    height: 400px;
    position: relative;

    .dialog {
      z-index: 99;
      position: absolute;
      right: 0;
      bottom: 0;

      .video {
        width: 100%;
        height: 300px;
      }
    }

    .mb8 {
      position: absolute;
      right: 20px;
      bottom: 10%;
    }
  }

  .right {
    width: 35%;
    height: 400px;
    list-style: none;
    overflow: auto;

    li {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: transparent;
      margin-bottom: 10px;
      color: #666;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #bfbfbf;
      cursor: pointer;

      .content {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.liStyle {
  background-color: aqua !important;
}
</style>
